<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>取消订单详情</title>
		<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/cancellationDetails.css"/>
		<script type="text/javascript" src="js/common/jquery-1.11.0.js"></script>

	</head>
	<body class="cancelbox">
		<div id="header">
			<div class="top">
				<div class="top-left">
					<i class="fa fa-map-marker "></i>
					<a href="javascript:void(0)" class="one">广州</a>
					<a href="javascript:void(0)" class="two">切换城市</a>
				</div>
				<div class="top-right">
					<a class="one">
						<i class="fa fa-user"></i> 朱莉
					</a>
					<a href="javascript:void(0)">退出</a>
					<a href="javascript:void(0)">帮助中心</a>
					<a href="javascript:void(0)">网站导航</a>
					<a href="javascript:void(0)">手机APP</a>
				</div>
			</div>
		</div>
		<div id="cancellationDetail">
			<div class="searchBox">
				<div class="search">
					<div class="search-left">
						<span class="husheng">互生</span>
						<span class="vertical">|</span>
						<span class="evaluate">休闲娱乐</span>
					</div>
					<div class="search-right">
						<div class="one">
							<input type="text" name="search" id="search" value="" placeholder="输入商家名称、分类或地区" />
							<a href="javascript:void(0)">
								<i class="fa fa-search"></i>
							</a>
						</div>
						<div class="two">
							<a href="#">运动健身</a>
							<a href="#">瑜伽</a>
							<a href="#">羽毛球</a>
							<a href="#">CS</a>
							<a href="#">农家乐</a>
							<a href="#">私人影院</a>
						</div>
					</div>
				</div>
			</div>
			<div class="detail">
				<div class="detailone">
<!--					********订单详情********-->
					<div class="listdetail">
						订单详情
					</div>
					<div class="liststatus">当前状态:
						<span class="canceled">已取消</span>
					</div>
<!--					*********预约信息******************-->
					<div class="appointmentdetail">
						预约信息
					</div>
					<div class="appointmentinfor1">
						<div class="time1 left">
							下单时间:
							<span>2018-06-24 18:00</span>

						</div>
						<div class="number left">
							到店人数:
							<span>3</span>
						</div>
						<div class="time2 right">
							预计到店时间:
							<span>2018-06-24 18:00</span>
						</div>
					</div>
					<div class="appointmentinfor1">
						<div class="time1 left">
							预约联系人:
							<span>廖志善</span>
						</div>
						<div class="number left">
							预约联系电话:
							<span >13723665792</span>
						</div>
					</div>
<!--					**********服务项目*******-->
					<div class="appointmentdetail">
						服务项目
					</div>
					<div class="serviceItems">
						<div class="img left">
							<img src="img/eva1.png"/>
						</div>
						<div class="servicedetail left">
							<p class="name">
								PBC健身一日课程
							</p>
							<div class="seriveone">
								<div class="seriveone1 left">
									<img src="img/yhq2.png"/>
									<span class="money">18.8</span>
								</div>
								<div class="seriveone2 left">
									<img src="img/yhq3.png"/>
									<span class="price">400</span>
								</div>
							</div>
						</div>
					</div>
<!--					********店家信息*********-->
					<div class="shop">
						<p class="swap">
							<span class="work">PBC健身一日工作室</span>
							<span class="worknum">(06 876 00 0001)</span>

						</p>
						<p class="swap">
							<span class="location">黄埔大道西668号跑马场内(新天地百货旁)</span>
							<img src="img/map.png"/>
							<a  class="map" href="#" >查看地图</a>

						</p>
					</div>
<!--					*****服务人员****-->
					<div class="serivepeopledetail">
						<span class="serivepeople">
							服务人员
						</span>
						<span class="tips">重要提示:服务人员不能提供服务商时,可协商变更</span>
						<span class="look">查看评价</span>
					</div>
					<div class="servicepicture">
						<img src="img/userhead.png"/>
						<p class="chenhehe">陈和合</p>
					</div>
				</div>
			</div>
<!--			*********底部********-->
			<div class="foot" id="foot">
				<p>
					<strong>客服热线： </strong>
					<a href="javascript:void(0)">
						0755-83344111
					</a>
					<span class="foot-adition">2013-2018 </span>
					<span>
						深圳市互生电子商务有限公司
					</span>
					<span>
						粤ICP备案号14100052号
					</span>
				</p>
		    </div>
		</div>
		<!--弹框-->
		<div class="tankuang none">
		</div>
		<div class="tankuangcontent none">
			<div class="top">
				<div class="assess">
					评价详情
				</div>
				<i class="fa fa-times" ></i>
			</div>
			<div class="infor">
				<div class="picture">
					<div class="box1">
						<div class="img">
							<img src="img/userhead.png"/>
						</div>
						<span class="name">陈和合</span>
					</div>
					<div class="box2">
						<div class="img">
							<img src="img/userhead.png"/>
						</div>
						<span class="name">陈和合</span>
					</div>
					<div class="box2">
						<div class="img">
							<img src="img/userhead.png"/>
						</div>
						<span class="name">陈和合</span>
					</div>
				</div>
				<div class="pingfen">
					<div class="xing">
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star"></i>
						<i class="fa fa-star star"></i>
						<span class="fen">4.5分</span>
						<p class="rate">
							<span class="serive1">服务质量:超赞</span>
							<span class="serive2">服务态度:很好</span>
							<span class="serive2">上门速度:很快</span>
						</p>
				   </div>
				</div>
			</div>
			<div class="user">
				<p class="userassess">用户评价</p>
				<div class="assessdetail">
					<div class="touxiang">
						<img src="img/userhead.png"/>
					</div>
					<div class="assessright">
						<div class="assesstop">
							<span class="username">陈****</span>
							<span class="time">2018-12-12</span>
						</div>
						<div class="xingxing">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star star"></i>
						</div>
						<div class="write">
							这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价,这里填写服务评价
						</div>
						<div class="pingjiapicture">
							<div class="tupian">
								<img src="img/eva1.png"/>
							</div>
							<div class="tupian2">
								<img src="img/eva1.png"/>
							</div>
							<div class="tupian2">
								<img src="img/eva1.png"/>
							</div>
						</div>
					</div>
				</div>
				<div class="reply">
					商家回复:<span>谢谢亲,这里填写商家回复,谢谢亲,这里填写商家回复,谢谢亲,这里填写商家回复,谢谢亲,这里填写商家回复,谢谢亲,这里填写商家回复,谢谢亲,这里填写商家回复,</span>
				</div>

			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			console.log("显示")
			$(".look").click(function(){
				$(".tankuang").css("display","block");
				$(".tankuangcontent").css("display","block")				;
			});
			$(".fa-times").click(function(){
				console.log("消失")
				$(".tankuang").css("display","none");
				$(".tankuangcontent").css("display","none");
			})
		})
	</script>
</html>
